<template>
  <div class="main">
    <div class="search-bg">
      <a-page-header class="custom-header" title="首页" />
      <search></search>
    </div>

    <shijuanlist></shijuanlist>

    <category></category>
  </div>
</template>
<script setup lang="ts">
import search from '@/views/home/search/search.vue'
import shijuanlist from '@/views/home/shijuanlist/shijuanlist.vue'

import category from './category/category.vue'
</script>
<style scoped>
.main {
  height: 100%;
}
.search-bg {
  height: 350px;

  background: url('../../assets/img/search.jpg');
}
/* 深度穿透组件样式 */
:deep(.custom-header .ant-page-header-heading) {
  justify-content: center !important;
}
:deep(.custom-header .ant-page-header-heading-title) {
  margin-right: 0 !important; /* 清除默认右边距 */
  color: #fff;
}

/* 覆盖 Ant Design 默认样式 */
:deep(.ant-tabs-nav-wrap) {
  display: flex;
  justify-content: space-around;
}
:deep(.ant-tabs-tab) {
  margin: 0 auto;
  align-items: center;
}
</style>
